<template>
  <div class="product_detail">
    <div class="product_detail_box">
      <div class="product_box">
        <div class="product_gallery">
          <img
              class="product_img"
              :src="'http://localhost:3100/js' + imageUrl"
              alt=""
          />
          <div class="thumbnail_list">
            <div class="thumbnail active" v-for="(item, index) in record.image" :key="index">
              <img :src="'http://localhost:3100/js' + item" alt="" @click="imageUrl = item" />
            </div>
          </div>
          <br />
          <a-button type="primary" @click="saveFavorite">
            <icon icon="ant-design:heart-twotone"></icon> 添加至收藏
          </a-button>
          &nbsp;
          <a-button type="primary" @click="toProductComment(record.id)">
            <icon icon="ant-design:message-filled"></icon> 用户评价
          </a-button>
        </div>

        <div class="product_info">
          <h1 class="product_tit">{{ record.name }}</h1>

          <div class="product_price">
            <div class="price">
              <span class="price_text">市场价：￥</span>
              <span class="price_num">{{ record.marketPrice }}</span>
            </div>
          </div>

          <div class="info_section">
            <div class="section_title">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
              基本信息
            </div>
            <div class="info_grid">
              <div class="info_item">
                <span class="label">品牌</span>
                <span class="value">{{ record.brand }}</span>
              </div>
              <div class="info_item">
                <span class="label">型号</span>
                <span class="value">{{ record.model }}</span>
              </div>
<!--              <div class="info_item">-->
<!--                <span class="label">容量</span>-->
<!--                <span class="value">480L</span>-->
<!--              </div>-->
<!--              <div class="info_item">-->
<!--                <span class="label">能效等级</span>-->
<!--                <span class="value">一级能效</span>-->
<!--              </div>-->
            </div>
          </div>

          <div class="info_section" v-if="record.specificationList">
            <div class="section_title">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
              规格参数
            </div>
            <div class="specs_list">
              <div class="spec_item" v-for="(item, index) in record.specificationList" :key="index">
                <span class="label">{{ item.name }}</span>
                <span class="value">{{ item.value }}</span>
              </div>
            </div>
          </div>

          <div class="info_section" v-if="record.characteristic">
            <div class="section_title">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
              产品特点
            </div>
            <div class="feature_list">
              <div class="feature_item" v-for="(item, index) in record.characteristic" :key="index">
                <div class="feature_title">{{item.name}}</div>
                <div class="feature_desc">{{item.value}}</div>
              </div>
            </div>
          </div>
          <div class="info_section">
            <div class="section_title"> 厂商售价 </div>
            <div class="feature_list">
              <div ref="chartRef" class="h-70 w-full"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="ProductDetail">
  import { ref, onMounted, Ref } from 'vue';
  import { Layout, LayoutHeader, LayoutContent, LayoutFooter, Col} from 'ant-design-vue';
  import Header from './components/Header.vue';
  import Footer from './components/Footer.vue';
  import Home from './Home.vue';
  import { JydqProduct, jydqProductForm } from "/@/api/jydq/jydqProduct";
  import { router } from "/@/router";
  import { EChartsOption } from "echarts";
  import { useECharts } from "/@/hooks/web/useECharts";
  import { BasicForm } from "/@/components/Form";
  import Icon from "/@/components/Icon/src/Icon.vue";
  import InputForm from "/@/views/jydq/userFavorite/form.vue";
  import { jydqUserFavoriteSave } from "/@/api/jydq/jydqUserFavorite";
  import { useMessage } from "/@/hooks/web/useMessage";

  const { showMessage } = useMessage();
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const options: EChartsOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          width: 1,
          color: '#019680',
        },
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      // max: 31,
      // min: 1,
      data: [
        '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
        '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
        '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31',
      ],
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: 'solid',
          color: 'rgba(226,226,226,0.5)',
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        type: 'value',
        max: 8000,
        splitNumber: 4,
        axisTick: {
          show: false,
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(255,255,255,0.2)'],
          },
        },
      },
    ],
    grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
    series: [
      // <serie>
    ],
  };

  const serie = {
    name: '123',
    smooth: true,
    data: [
      /*33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390,*/
    ],
    type: 'line',
    areaStyle: {},
    itemStyle: {
      color: '#019680',
    },
  };
  const record = ref<JydqProduct>({} as JydqProduct);
  let imageUrl = ref('');

  async function saveFavorite() {
    try {
      const data = { productId: record.value.id };
      const params: any = {
        isNewRecord: true,
      };
      // console.log('submit', params, data, record);
      const res = await jydqUserFavoriteSave(params, data);
      showMessage(res.message);
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage(error.message || 'common.validateError');
      }
      console.log('error', error);
    }
  }

  const toProductComment = (value: string) => {
    router.push({ path: '/client/comment', query: { key: '', value: value } });
  };

  onMounted(async () => {
    const res = await jydqProductForm({ id: router.currentRoute.value.query.value });
    record.value = res.jydqProduct;
    record.value.image = res.jydqProduct.image.split(',');
    imageUrl.value = record.value.image[0];
    if (res.jydqProduct.prices) {
      let colorSpread = getColorSpread(res.jydqProduct.prices.size, 120);
      let i = 0;
      for (const key in res.jydqProduct.prices) {
        let value = res.jydqProduct.prices[key];
        // seriei 就是曲线图中的一条线
        const seriei = JSON.parse(JSON.stringify(serie));
        seriei.name = key;
        seriei.itemStyle.color = colorSpread[i];
        let j = 0;
        value.forEach((productPrice) => {
          seriei.data[j] = productPrice.currentPrice;
          j++;
        });
        options.series[i] = seriei;
        i++;
      };
    };
    options.yAxis[0].max = res.jydqProduct.marketPrice * 2;
    setOptions(options);
  });

  // 简化版均匀颜色生成器
  // 使用示例
  // console.log(getColorSpread(5, 120));
  // 输出：["#009688", "#00cc99", "#00ffaa", "#aaffee", "#ffeeff"]
  function getColorSpread(count, startHue = 0) {
    const colors = [];
    const hueStep = 360 / count;

    for(let i = 0; i < count; i++) {
      const hue = (startHue + i * hueStep) % 360;
      colors.push(hueToHex(hue, 0.8, 0.6)); // 固定饱和度80%和明度60%
    }
    return colors;
  }

  // HSL转HEX的精简版
  function hueToHex(h, s, l) {
    h /= 360;
    s /= 100;
    l /= 100;

    let r, g, b;
    if(s === 0) {
      r = g = b = l;
    } else {
      const c = (1 - Math.abs(2*l - 1)) * s;
      const x = c * (1 - Math.abs((h/60) % 2 - 1));
      const m = l - c/2;

      // 根据色相值计算RGB分量
      switch(Math.floor(h/60)) {
        case 0: r = c; g = x; b = 0; break;
        case 1: r = x; g = c; b = 0; break;
        case 2: r = 0; g = c; b = x; break;
        case 3: r = 0; g = x; b = c; break;
        case 4: r = x; g = 0; b = c; break;
        case 5: r = c; g = 0; b = x; break;
      }
    }
    return `#${(r*255).toString(16).padStart(2,'0')}${(g*255).toString(16).padStart(2,'0')}${(b*255).toString(16).padStart(2,'0')}`;
  }
</script>

<style scoped lang="less">
  .product_detail {
    padding: 40px 16vw;
    background: #f7f8fa;
    min-height: 100vh;

    .product_detail_box {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      padding: 40px;

      .product_box {
        display: flex;
        gap: 60px;
      }
    }
  }

  .product_gallery {
    flex: 0 0 500px;

    .product_img {
      width: 100%;
      border-radius: 12px;
      margin-bottom: 20px;
    }

    .thumbnail_list {
      display: flex;
      gap: 10px;

      .thumbnail {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid transparent;

        &.active {
          border-color: #2c3e50;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .product_info {
    flex: 1;

    .product_tit {
      font-size: 28px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 24px;
      line-height: 1.4;
    }

    .product_price {
      margin-bottom: 32px;

      .price {
        color: #2c3e50;
        font-weight: bold;

        .price_text {
          font-size: 20px;
        }

        .price_num {
          font-size: 32px;
        }
      }
    }
  }

  .info_section {
    margin-bottom: 32px;
    padding: 24px;
    background: #f8f9fa;
    border-radius: 12px;

    .section_title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 20px;

      svg {
        color: #2c3e50;
      }
    }
  }

  .info_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;

    .info_item {
      display: flex;
      align-items: center;

      .label {
        width: 100px;
        color: #666;
        font-size: 14px;
      }

      .value {
        color: #2c3e50;
        font-size: 14px;
        font-weight: 500;
      }
    }
  }

  .feature_list {
    .feature_item {
      margin-bottom: 16px;

      .feature_title {
        font-size: 16px;
        font-weight: 500;
        color: #2c3e50;
        margin-bottom: 4px;
      }

      .feature_desc {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
      }
    }
  }

  .specs_list {
    .spec_item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .label {
        width: 120px;
        color: #666;
        font-size: 14px;
      }

      .value {
        flex: 1;
        color: #2c3e50;
        font-size: 14px;
      }
    }
  }
</style>
<script setup lang="ts">
</script>
